<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理系统</title>
    <script src="/common/common-js.js" type="application/javascript"></script>
</head>
<body>
<div id="app" style="width: 100% ;margin: auto">
    <el-container style="height: 820px">
        <el-header>
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">图书信息查阅</el-menu-item>
                <el-menu-item index="2">图书类别</el-menu-item>
                <el-menu-item index="3">借阅信息</el-menu-item>
                <el-menu-item index="4">借阅历史</el-menu-item>
                <el-menu-item index="5">关于我</el-menu-item>
            </el-menu>
        </el-header>
        <el-main>
            <el-row type="flex" style="margin-bottom: 10px" justify="space-between" >
                <el-col :span="14">
                    <el-button type="primary" plain size="small" @click="addPrepare()"><i
                            class="el-icon-circle-plus-outline"> 新增</i></el-button>
                </el-col>
                <el-col :span="4">
                    <el-input v-model="search"
                              size="small"
                              placeholder="输入关键字搜索"
                              prefix-icon="el-icon-search"/>
                </el-col>
                <el-col :span="6" style="margin-left: 20px">
                    <el-button type="primary" plain size="small" icon="el-icon-search">搜索</el-button>
                    <el-button type="primary" plain size="small" icon="el-icon-refresh-left">重置</el-button>
                </el-col>
            </el-row>
            <template>
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                    <el-table-column
                            type="index"
                            label="类别编号"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="typeName"
                            label="类别名称"
                            width="400">
                    </el-table-column>
                    <el-table-column
                            label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="edit(scope.row.id)">
                                <i class="el-icon-edit"> 编辑</i></el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="del(scope.row.id)">
                                <i class="el-icon-delete"> 删除</i></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <!--弹出新增窗口-->
            <el-dialog :title="titleMap[dialogStatus]" width="450px" :visible.sync="formVisible" v-if="formVisible"
                       @close="resetForm('pojo')">
                <el-form label-width="100px" :rules=rulesList :model="pojo" ref="pojo">
                    <el-form-item label="类别名称" prop="typeName">
                        <el-input v-model="pojo.typeName" style="width: 240px" placeholder="在这里输入类别名称"
                                  prefix-icon="el-icon-files"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitForm('pojo')">保存</el-button>
                    <el-button @click="resetForm('pojo')">取消</el-button>
                </div>
            </el-dialog>
        </el-main>
        <el-footer>
            <div class="pagination">
                <el-pagination
                        background
                        @current-change="getTableData"
                        :current-page.sync="currentPage"
                        layout="total,prev, pager, next"
                        :total="total"
                        :page-size="pageSize"
                >
                </el-pagination>
            </div>
        </el-footer>
    </el-container>
</div>
<script src="/js/axios.min.js"></script>
<script>
    var vm = {
        data() {
            var checkType = async (rule, value, callback) => {
                var response = await this.checkBookType(value);
                if (response.data.model > 0) {
                    callback(new Error('该图书类别已存在'));
                } else {
                    callback();
                }
            };
            return {
                activeIndex: '2',
                tableData: [],
                currentPage: 1,
                pageSize: 10,
                total: 0,
                formVisible: false,
                pojo: {},
                addRules: {
                    typeName: [
                        {required: true, message: '图书类别不能为空', trigger: 'blur'},
                        {validator: checkType, trigger: 'blur'}
                    ]
                },
                titleMap: {
                    addBookType: "新增图书类别",
                    editBookType: "编辑图书类别"
                },
                dialogStatus: "",
                search: ''

            }
        },
        created() {
            this.getTableData();
        },

        computed: {
            rulesList: function() {
                if (this.pojo.id == null) {
                    return this.addRules;
                } else {
                    return null;
                }
            }
        },

        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            //获取表格数据
            getTableData() {
                axios.get(`/bookType/queryBookTypeList?currentPage=${this.currentPage}`).then(response => {
                    this.tableData = response.data.model;
                    /*this.total = response.data.totalRecord;*/
                })
            },

            checkBookType(typeName) {
                return axios.get(`/bookType/queryBookTypeByName?typeName=${typeName}`);
            },
            //新增
            addPrepare() {
                this.pojo = {};
                this.formVisible = true;
                this.dialogStatus = "addBookType";
            },

            save() {
                axios.post(`/bookType/${this.pojo.id == null ? 'addBookType' : 'updateBookType'}`, this.pojo).then(response => {
                    this.getTableData();
                    this.formVisible = false;
                    this.addSuccess();
                })
            },
            addSuccess() {
                if (this.pojo.id == null) {
                    this.$message({
                        message: '新增成功',
                        type: 'success'
                    });
                } else {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                }
            },
            //编辑
            edit(id) {
                this.formVisible = true;
                this.dialogStatus = "editBookType";
                axios.get(`/bookType/queryBookTypeById?id=${id}`).then(response => {
                    this.$nextTick(() => {
                        this.pojo = response.data.model;
                    })

                })
            },
            //删除
            del(id) {
                this.$confirm('确定要删除该类别吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(`/bookType/deleteBookType?id=${id}`).then(response => {
                        this.getTableData();
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                    })
                })
            },
            //提交表单
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.save()
                    } else {
                        console.log('提交表单失败!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.formVisible = false;
            }
        }
    }
    var Ctor = Vue.extend(vm)
    new Ctor().$mount('#app')

</script>
</body>
</html>